<template>
  <div class="container">
    <div class="myform">
      <div class="title">
        <h6>登录</h6>
      </div>
      <div class="login-form">
        <el-form :model="loginForm" :rules="rules" ref="loginForm">
          <el-form-item prop="username">
            <el-input v-model="loginForm.username"></el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input show-password v-model="loginForm.pwd"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="warning" @click="submitForm('loginForm')">立即登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import {loginApi} from '../api/loginApi'
import {setToken} from '../utls/cookieUtils'
export default {
  data(){
    return{
      loginForm:{
        username:'',
        pwd:''
      },
      rules:{
          username: [
            { required: true, message: '请输入账号', trigger: 'blur' }
          ],
          pwd:[
            { required: true, message: '请输入密码', trigger: 'blur' }
          ]
      }
    }
  },
  methods:{
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          // 如果验证通过,发送登录请求
          if (valid) {
            loginApi(this.loginForm).then(res=>{
              if(res.code==200){
                // 登录成功,将返回的token存储在cookie中
                // console.log(res);
                setToken('token',res.data)
                this.$router.push('/')
              }else{
                this.$message({
                  message: res.msg,
                  type: 'warning'
                });
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
  }
}
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  background: url('../../public/登陆页/homepage-photo_03.png') no-repeat center center;
  background-size:100% 100%;
  .myform{
    width: 380px;
    height: 320px;
    border-radius: 10px;
    position:absolute;
    left: 70%;
    top:30%;
    background-color: white;
    .title{
      height: 60px;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 25px;
      font-weight: 800;
    }
    .login-form{
      padding: 20px;
      .el-button{
        width: 100%;
        height: 40px;
      }
    }
  }
}
</style>